<template>
  <!-- 方法的默认第一个参数是$event -->
  <div>
    <button @click="addCount(10)">+1</button>
    <button @click="AddAsyncCount">Async +</button>
    <button @click="getAsyncCount(10000)">(辅助)Async +</button>
    <!-- getters -->
    <div>原始形式：{{ $store.getters.filterList }}</div>
    <div>辅助形式：{{ filterList }}</div>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapGetters } from "vuex";
export default {
  methods: {
    //   原始形式
    //   addCount () {
    //       // commit(mutation名称, 载荷)
    //      this.$store.commit("addCount", 10)  // 提交mutations
    //   },
    ...mapMutations(["addCount"]),
    AddAsyncCount() {
      // 原始形式 调用action
      this.$store.dispatch("getAsyncCount", 1000);
    },
    ...mapActions(["getAsyncCount"]),
  },
  computed: {
    ...mapGetters(["filterList"]),
  },
};
</script>

<style>
</style>